<template>
    <view class="myAddress pb-150">
        <Navigation title="我的收货地址" background="#fff" />

        <u-swipe-action>
            <u-swipe-action-item :options="option" v-for="(item, index) in list" :key="index" :name="index" @click="operate">
                <view class="f ai-c jc-s-b ph-40 pv-32" @click.stop="selectAddress(item)">
                    <view class="f f1 fd-c">
                        <view class="f">
                            <view class="w-152 fs-30 fw-500 text-color4">{{ item.name }}</view>
                            <view class="fs-30 fw-500 text-color4 mr-13">{{ phoneNumbe(item.mobile) }}</view>
                            <view class="fs-22 text-color5 h-32 b-4 ph-8 f ai-c default" v-show="item.defaultStatus">默认地址</view>
                        </view>
                        <view class="mt-8 fs-24 text-color3">{{ item.areaName }}{{ item.detailAddress }}</view>
                    </view>
                    <image src="http://cwht.ricecs.cn/app/mine/edit-address.png" class="w-24 h-24 ml-82" @click.stop="toDetail(item)"></image>
                </view>
            </u-swipe-action-item>
        </u-swipe-action>

        <!-- 没有数据 -->
        <view class="w-f f ai-c jc-c fs-34 fw-500 text-color1 noData" v-show="list.length == 0 && !loading">您还没有添加收货地址额~</view>

        <view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f ph-40" @click="toAddAdress">
            <view class="w-f h-96 b-96 f ai-c jc-c btn mb-32">
                <text class="fs-50 fw-500 text-color5 mr-16">+</text>
                <view class="fs-32 fw-500 text-color5">新建收货地址</view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
import { phoneNumbe } from '@/utils/global';
import { addressList, addresUpdate, addressDelete } from '@/services/api/address';
const list = ref([]);
const type = ref('');
const loading = ref(true);
const option = [
    {
        text: '设为默认',
        style: {
            backgroundColor: '#F8F8F8',
            color: '#222222',
            width: '116rpx',
            fontSize: '26rpx',
        },
    },
    {
        text: '删除',
        style: {
            backgroundColor: '#F54040',
            color: '#fff',
            width: '116rpx',
            fontSize: '26rpx',
        },
    },
];
onLoad((options: any) => {
    type.value = options.type;
});
onShow(() => {
    getList();
});

async function getList() {
    loading.value = true;
    const { data } = await addressList({});
    list.value = data;
    loading.value = false;
}
//选择地址
function selectAddress(data: any) {
    if (type.value === 'select') {
        var pages = getCurrentPages();
        var prevPage: any = pages[pages.length - 2];
        prevPage.setData({
            addressData: data,
        });
        uni.navigateBack({
            delta: 1,
        });
    }
}
//操作
function operate(data: any) {
    if (data.index == 0) {
        setDefault(list.value[data.name]);
    } else {
        del(list.value[data.name]);
    }
}
async function del(data: any) {
    uni.showModal({
        title: '提示',
        content: '确定删除',
        success: async function (res) {
            if (res.confirm) {
                await addressDelete({ id: data.id });
                uni.showToast({
                    title: '删除成功',
                    icon: 'none',
                });
                setTimeout(() => {
                    getList();
                }, 1000);
            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        },
    });
}
async function setDefault(data: any) {
    data.defaultStatus = true;
    await addresUpdate(data);
    uni.showToast({
        title: '修改成功',
        icon: 'none',
    });
    setTimeout(() => {
        getList();
    }, 1000);
}
function toDetail(data: any) {
    uni.navigateTo({
        url: `/pages_mine/addAdress/index?id=${data.id}`,
    });
}
function toAddAdress() {
    uni.navigateTo({
        url: '/pages_mine/addAdress/index',
    });
}
//底部安全距离
const systemInfo = uni.getSystemInfoSync();
let safeArea = systemInfo.safeArea;
let screenHeight = systemInfo.screenHeight;
let safeAreaBottom = screenHeight - safeArea.bottom;
</script>
<style lang="scss" scoped>
.myAddress {
    background: #f5f5f5;
    min-height: 100vh;
    ::v-deep .u-line-1 {
        word-break: 'normal' !important;
        -webkit-line-clamp: 2 !important;
    }
    .default {
        background: #f54040;
    }
    .noData {
        margin-top: 50%;
    }
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 1111;
        .btn {
            background: #fabb3c;
        }
    }
}
</style>
